//
// Buttons
// --------------------------------------------------

//== Buttons variable
// -------------------------
$btn-font-weight: normal !default;

$btn-default-color: #333333 !default;
$btn-default-bg: $color-white !default;
$btn-default-border-color: #cccccc !default;

$btn-primary-color: $color-white !default;
$btn-primary-bg: $brand-primary !default;
$btn-primary-border-color: darken($btn-primary-bg, 5%) !default;

$btn-success-color: $color-white !default;
$btn-success-bg: $brand-success !default;
$btn-success-border-color: darken($btn-success-bg, 5%) !default;

$btn-info-color: $color-white !default;
$btn-info-bg: $brand-info !default;
$btn-info-border-color: darken($btn-info-bg, 5%) !default;

$btn-warning-color: $color-white !default;
$btn-warning-bg: $brand-warning !default;
$btn-warning-border-color: darken($btn-warning-bg, 5%) !default;

$btn-danger-color: $color-white !default;
$btn-danger-bg: $brand-danger !default;
$btn-danger-border-color: darken($btn-danger-bg, 5%) !default;

$btn-link-disabled-color: $color-gray-light !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius-base: $border-radius-base !default;
$btn-border-radius-large: $border-radius-large !default;
$btn-border-radius-small: $border-radius-small !default;

//== Buttons styles
// -------------------------
.btn {
    display: inline-block;
    margin-bottom: 0;
    background-image: none;
    border: 1px solid transparent;
    font-weight: $btn-font-weight;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    touch-action: manipulation;
    @include fn-button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $btn-border-radius-base);
    @include fn-user-select(none);
  
    &, 
    &:active, 
    &.active {
        &:focus, 
        &.focus {
            @include fn-tab-focus;
        }
    }
  
    &:hover, 
    &:focus, 
    &.focus {
        color: $btn-default-color;
        text-decoration: none;
    }
  
    &:active, 
    &.active {
        background-image: none;
        @include fn-box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
        outline: 0;
    }
  
    &.disabled, 
    &[disabled], 
    fieldset[disabled] & {
        cursor: $cursor-disabled;
        @include fn-opacity-compatible(.65);
        @include fn-box-shadow(none);
    }
}

a.btn {
    &.disabled, 
    fieldset[disabled] & {
        pointer-events: none; // Future-proof disabling of clicks on `<a>` elements
    }
}

// Alternate buttons
// -------------------------
.btn-default {
    @include fn-button-variant($btn-default-color, $btn-default-bg, $btn-default-border-color);
}
.btn-primary {
    @include fn-button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
}
// Success appears as green
.btn-success {
    @include fn-button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
}
// Info appears as blue-green
.btn-info {
    @include fn-button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
}
// Warning appears as orange
.btn-warning {
    @include fn-button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
}
// Danger and error appear as red
.btn-danger {
    @include fn-button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
}

// Link buttons
// -------------------------
// Make a button look and behave like a link
.btn-link {
    color: $link-color;
    font-weight: normal;
    @include fn-border-radius(0);
  
    &, 
    &:active, 
    &.active, 
    &[disabled], 
    fieldset[disabled] & {
        background-color: transparent;
        @include fn-box-shadow(none);
    }
    
    &, 
    &:hover, 
    &:focus, 
    &:active {
        border-color: transparent;
    }
  
    &:hover, 
    &:focus {
        background-color: transparent;
        color: $link-hover-color;
        text-decoration: $link-hover-decoration;
    }
    
    &[disabled], 
    fieldset[disabled] & {
        &:hover, 
        &:focus {
            color: $btn-link-disabled-color;
            text-decoration: none;
        }
    }
}

// Block button
// -------------------------
.btn-block {
    display: block;
    width: 100%;
}

// Vertically space out multiple block buttons
.btn-block + .btn-block {
    margin-top: 5px;
}

// Specificity overrides
input[type="submit"], 
input[type="reset"], 
input[type="button"] {
    &.btn-block {
        width: 100%;
    }
}
